<template>
  <div class="home">
    <div class="top-nav">
      <div class="nav-container">
        <div class="logo">
          <span>DJM旅游</span>
        </div>
        <ul class="main-nav">
          <li v-for="(item, index) in navItems" :key="index"
              :class="{active: activeNav === index}"
              @click="activeNav = index">
            {{ item }}
          </li>
        </ul>
      </div>
    </div>

    <div class="search-container">
      <h1 class="search-title">探索我的下一站旅程</h1>
      <div class="search-group">
        <el-input
            class="search-place"
            v-model="searchQuery"
            placeholder="输入国内目的地，如北京、成都"
            size="large"
            @input="handleInput"
            @focus="handleFocus"
        >
          <template #prefix>
            <el-icon>
              <Search/>
            </el-icon>
          </template>
        </el-input>
        <div
            v-show="showDropdown && locations.length > 0"
            class="location-dropdown"
            @mousedown.prevent
        >
          <ul>
            <li
                v-for="(location, idx) in locations"
                :key="idx"
                class="dropdown-item"
            >
              <span class="province">{{ location.provinceName }}</span>
              <span class="divider">|</span>
              <span class="city">{{ location.cityName }}</span>
              <span class="divider">|</span>
              <span class="area">{{ location.areaName || '全部地区' }}</span>
            </li>
          </ul>
        </div>
        <el-button
            type="primary"
            size="large"
            class="search-button"
            style="width: 80px"
        >
          搜索行程
        </el-button>
      </div>
      <div class="search-tips">
        热门搜索：北京 | 上海 | 成都 | 三亚 | 大理
      </div>
    </div>
  </div>
</template>

<script>
import {Search} from '@element-plus/icons-vue'
import {searchLocation} from "@/api/home/location.js";
import {debounce} from "lodash";

export default {
  components: {
    Search
  },
  data() {
    return {
      debouncedSearch: null,
      activeNav: 0,
      navItems: ['首页'],
      searchQuery: '', // 搜索关键词
      loading: false,  // 加载状态
      locations: [], //搜索框索引到的地址列表
      showDropdown: false, // 是否显示下拉框
    }
  },
  created() {
    this.debouncedSearch = debounce(this.fetchLocation, 300);
  },
  methods: {
    handleInput() {
      this.showDropdown = true;
      if (this.searchQuery.trim()) {
        this.debouncedSearch(this.searchQuery);
      } else {
        this.locations = [];
      }
    },
    handleBlur(){
      this.showDropdown=false;
    },
    handleFocus(){
      if(this.searchQuery.trim()){
        this.showDropdown=false;
      }
    },
    fetchLocation(name) {
      let params = {}
      params.name = name
      searchLocation(params).then(res => {
        const {status, data, message} = res.data
        if(status === 0){
          this.locations = data.list
        }else{
          this.$message.closeAll()
          this.$message({message:message, type:"warning"})
          this.locations=[]
        }
      })
    },
    // async handleSearch() {
    //   if (!this.searchQuery.trim()) {
    //     this.$message.warning('请输入搜索内容')
    //     return
    //   }
    //
    //   this.loading = true
    //   try {
    //     const response = await axios.get('/itinerary/page', {
    //       params: {
    //         keyword: this.searchQuery,
    //         page: 1,
    //         size: 10
    //       }
    //     })
    //
    //     console.log('搜索结果:', response.data)
    //     this.$message.success(`找到 ${response.data.total} 条相关行程`)
    //   } catch (error) {
    //     console.error('搜索失败:', error)
    //     this.$message.error('搜索失败，请稍后重试')
    //   } finally {
    //     this.loading = false
    //   }
    // }
  }
}
</script>

<style scoped>
body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.home {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #ffffff;
}

.top-nav {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 12px 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100vw;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
}

.logo {
  font-size: 28px;
  font-weight: bold;
  color: #444444;
  margin-right: 50px;
}

.main-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.main-nav li {
  margin: 0 15px;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.3s;
  position: relative;
  white-space: nowrap;
}

.main-nav li:hover, .main-nav li.active {
  color: #ff9d00;
}

.main-nav li.active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #ff9d00;
}

.search-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.search-title {
  font-size: 30px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.search-group {
  padding-bottom: 10px;
}

.search-place {
  width: 300px;
  margin-right: 10px;
}

.search-button {
  width: 150px;
}

.search-tips {
  font-size: 14px;
  color: #666;
}
.province {
  color: #888;
  font-size: 14px;
}

.city {
  color: #333;
  font-weight: 600;
  margin: 0 5px;
}

.area {
  color: #666;
  font-size: 14px;
}

.divider {
  color: #ddd;
  margin: 0 8px;
}
</style>
